<template>
  <div ref="charts" style="width:99%;height:250px;"></div>
</template>

<script>
import { reactive, toRefs, ref, onMounted} from 'vue'
import * as Charts from 'echarts'
export default {
setup(){
    const charts= ref()
    const data = reactive({
    })
    onMounted(()=>{
        init()
    })
    function init() {
        var myChart = Charts.init(charts.value)
        var data= [
            { name: '高级风险', value: 76 },
            { name: '中级风险', value: 12 },
            { name: '低级风险', value: 10 }
        ];
        var dataHigh = data[0].value;
        var dataMiddle = data[1].value;
        var dataLow = data[2].value;
        var total = 0;
        for (var i = 0; i < data.length; i++) {
        total += data[i].value;
        }
        var perHigh = ((dataHigh / total) * 100).toFixed(0) + '%';
        var perMiddle = ((dataMiddle / total) * 100).toFixed(0) + '%';
        var perLow = ((dataLow / total) * 100).toFixed(0) + '%';
        var option = {
        backgroundColor: '#fff',
        title: [
        {
        text: '高级风险' + '{num|' + dataHigh + '}条',
        bottom: '17%',
        left: '14%',
        textAlign: 'center',
        textStyle: {
            color: '#666',
            fontSize: 15,
            fontWeight: 'normal',
            textAlign: 'center',
            rich: {
            num: {
            color: '#4d71df',
            fontSize: 20,
            },
            },
        },
        },
        {
        text: '中级风险' + '{num|' + dataMiddle + '}条',
        bottom: '17%',
        left: '47%',
        textAlign: 'center',
        textStyle: {
            color: '#666',
            fontSize: 15,
            fontWeight: 'normal',
            rich: {
            num: {
            color: 'rgb(123, 23, 148)',
            fontSize: 20,
            },
            },
        },
        },
        {
        text: '低级风险' + '{num|' + dataLow + '}条',
        bottom: '17%',
        left: '80%',
        textAlign: 'center',
        textStyle: {
            color: '#666',
            fontSize: 15,
            fontWeight: 'normal',
            textAlign: 'center',
            rich: {
            num: {
            color: 'rgb(250, 202, 250)',
            fontSize: 20,
            },
            },
        },
        },
        ],
        graphic: [
        {
        type: 'text',
        top: '39%',
        left: '13%',
        style: {
            text: perHigh,
            font: '30px "microsoft yahei"',
            textAlign: 'center',
            fill: 'rgb(67, 59, 102)',
        },
        },
        {
        type: 'text',
        top: '39%',
        left: '46%',
        style: {
            text: perMiddle,
            font: '30px "microsoft yahei"',
            textAlign: 'center',
            fill: 'rgb(123, 23, 148)',
        },
        },
        {
        type: 'text',
        top: '39%',
        left: '78%',
        style: {
            text: perLow,
            font: '30px "microsoft yahei"',
            textAlign: 'center',
            fill: 'rgb(250, 202, 250)',
        },
        },
        ],
        tooltip: {
        show: false,
        },
        series: [
        {
        name: '高级风险',
        type: 'pie',
        center: ['15%', '40%'],
        radius: ['40%', '45%'],
        startAngle: 180, //起始角度
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        },
        hoverAnimation: false,
        emphasis: false,
        data: [
            {
            value: dataHigh,
            name: '',
            itemStyle: {
            normal: {
            color: 'rgb(67, 59, 102)',
            },
            },
            },
            {
            name: '',
            itemStyle: {
            emphasis: {
            color: '#e6e9f0',
            },
            normal: {
            color: '#e6e9f0',
            },
            },
            value: total - dataHigh, // 总数减去当前项数(灰色占比)
            },
        ],
        },
        {
        name: '中级风险',
        type: 'pie',
        center: ['48%', '40%'],
        radius: ['40%', '45%'],
        startAngle: 180, //起始角度
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        },
        hoverAnimation: false,
        data: [
            {
            value: dataMiddle,
            name: '',
            itemStyle: {
            normal: {
            color: 'rgb(123, 23, 148)',
            },
            },
            },
            {
            name: '',
            itemStyle: {
            emphasis: {
            color: '#e6e9f0',
            },
            normal: {
            color: '#e6e9f0',
            },
            },
            value: total - dataMiddle, // 总数减去当前项数(灰色占比)
            },
        ],
        },
        {
        name: '低级风险',
        type: 'pie',
        center: ['80%', '40%'],
        radius: ['40%', '45%'],
        startAngle: 180, //起始角度
        label: {
            show: false,
        },
        labelLine: {
            show: false,
        },
        hoverAnimation: false,
        data: [
            {
            value: dataLow,
            name: '',
            itemStyle: {
            normal: {
            color: 'rgb(250, 202, 250)',
            },
            },
            },
            {
            name: '',
            itemStyle: {
            emphasis: {
            color: '#e6e9f0',
            },
            normal: {
            color: '#e6e9f0',
            },
            },
            value: total - dataLow, // 总数减去当前项数(灰色占比)
            },
        ],
        },
        ],
        };  
   // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.onresize = myChart.resize;
    }
    return{
        ...toRefs(data),
        charts
    }
}
}
</script>

<style>

</style>